<?xml version='1.0' encoding='UTF-8' ?> 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html">
    
    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />        
        <link href="style.css" rel="stylesheet" type="text/css" />
        <script type="text/javascript" src="jquery.min.js"></script>
        <script type="text/javascript" src="ddaccordion.js"></script>
        <script type="text/javascript">
        ddaccordion.init({
                headerclass: "submenuheader", //Shared CSS class name of headers group
                contentclass: "submenu", //Shared CSS class name of contents group
                revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
                mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
                collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
                defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
                onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
                animatedefault: false, //Should contents open by default be animated into view?
                persiststate: true, //persist state of opened contents within browser session?
                toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
                togglehtml: ["suffix", "<img src='images/plus.gif' class='statusicon' />", "<img src='images/minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
                animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
                oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
                        //do nothing
                },
                onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
                        //do nothing
                }
        })
        </script>
        <title>Admin Tours And Travel</title>
    </h:head>
    
    <h:body>

        <div id="top1">
            Welcome to: Admin
            <a href="#">Logout</a>
        </div>
        <div id="top">
            <img src="../images/logo2.png" alt="" width="200" height="95"/>
        </div>
        <div id="menu">
            <span>ADMINISTRATOR AREA</span>
        </div>
        <div id="content">
            <div class="left">
                <div class="sidebarmenu">
                <a class="menuitem submenuheader" href="">Profile: Admin</a>
                <div class="submenu">
                    <ul>
                    <li><a href="ChangePass.xhtml">Change password</a></li>
                    <li><a href="ViewProfile.xhtml">View profile</a></li>
                    </ul>
                </div>

                <a class="menuitem submenuheader" href="">Tours</a>
                <div class="submenu">
                    <ul>
                    <li><a href="CreateTour.xhtml">Create Tour</a></li>
                    <li><a href="ViewTours.xhtml">View All Tour</a></li>
                    </ul>
                </div>
                <a class="menuitem submenuheader" href="" >Car</a>
                <div class="submenu">
                    <ul>
                    <li><a href="CreateCar.xhtml">Create Car</a></li>
                    <li><a href="ViewCars.xhtml">View All Car</a></li>
                    </ul>
                </div>
                <a class="menuitem submenuheader" href="">Hotel</a>
                <div class="submenu">
                    <ul>
                    <li><a href="">Create Hotel</a></li>
                    <li><a href="">View All Hotel</a></li>
                    </ul>
                </div>                
                <a class="menuitem submenuheader" href="">Flight</a>
                <div class="submenu">
                    <ul>
                    <li><a href="">Create Flight</a></li>
                    <li><a href="">View All Flight</a></li>
                    </ul>
                </div>
                <a class="menuitem submenuheader" href="">Order</a>
                <div class="submenu">
                    <ul>
                    <li><a href="">View All Order</a></li>
                    <li><a href="">View All Customer</a></li>
                    </ul>
                </div>
                <a class="menuitem" href="">&nbsp;</a>
            </div>
            </div>
            <div class="right">
            <ui:insert name="content">                
            </ui:insert>
            </div>
        </div>
        
    </h:body>
    
</html>
